<template>
   <footer class="footer">
      <ul>
        <router-link to="/home" tag="li">
          <span class="iconfont icon-shouye"></span>
          <p>首页</p>
        </router-link>
        <router-link to="/kind" tag="li">
          <li>
            <span class="iconfont icon-leimupinleifenleileibie"></span>
            <p>分类</p>
          </li>
        </router-link>
        <router-link to="/cart" tag="li">
          <li>
            <span class="iconfont icon-gouwuche"></span>
            <p>购物车{{totalNum}}</p>
          </li>
        </router-link>
        <router-link to="/user" tag="li" v-if="loginState">
          <li>
            <span class="iconfont icon-wode1"></span>
            <p>我的</p>
          </li>
        </router-link>
        <router-link to="/login" tag="li" v-else>
          <li>
            <span class="iconfont icon-wode1"></span>
            <p>未登录</p>
          </li>
        </router-link>
      </ul>
    </footer>
</template>

<script>
import { mapState, mapActions, mapGetters } from 'vuex'
import storeMixin from '@/mixins/storeMixin'
export default {
  mixins: [storeMixin],
  computed: {
    ...mapState({
      // loginState: (state) => state.user.loginState
      // loginState: ({ user }) => user.loginState
      loginState: ({ user: { loginState } }) => loginState,
      userid: ({ user: { userid } }) => userid,
      token: ({ user: { token } }) => token
    }),
    ...mapGetters({
      totalNum: 'totalNum'
    })
    // totalNum () {
    //   return this.$store.getters.totalNum
    // }
    // loginState () {
    //   if (this.$store.state.user.loginState) {
    //     return true
    //   } else {
    //     return false
    //   }
    // }
  },
  methods: {
    ...mapActions({
      getCartList: 'cart/getCartList'
    })
  },
  created () {
    if (this.loginState && this.token) {
      this.getCartList(this.userid)
    }
  }
}
</script>
